<style type="text/css">
.main-menu li {
list-style-type: none;
font-size: 14px;
}
.main-menu li span, .main-menu li.act span {
color: white;
float: left;
padding: 7px 14px 12px 2px;
}
.content-tnm-col-right
{
    background: url("<?php echo Yii::app()->request->baseUrl ?>/images/sub-content-right.png") repeat-y scroll 0 0 transparent;
    height: 900px;
    overflow: hidden;
    padding: 10px 10px 0 15px;
    width: 215px;
}
.content-tnm-col-left{
	background:url(<?php echo Yii::app()->request->baseUrl ?>/images/sub-content-left.png) repeat-y;
    height: 900px;
	width:970px;
	padding: 2px 20px;
	position:relative;
 	}

</style>
<div class="tnm-col-left">
        	<h2 class="title-tnm-col-left">Lịch đặt sân</h2>
            <div class="content-tnm-col-left">
            	<div id="calhead" style="padding-left:1px;padding-right:1px;">          
                    <div class="cHead"><div class="ftitle"><?php echo CHtml::
link(Yii::app()->name, Yii::app()->controller->createUrl('/')); ?></div>
                    <div id="loadingpannel" class="ptogtitle loadicon" style="display: none;">Tải dữ liệu...</div>
                     <div id="errorpannel" class="ptogtitle loaderror" style="display: none;">Không tải được dữ liệu.Hãy thử lại</div>
                    </div>          
                    
                    <div id="caltoolbar" class="ctoolbar">
                    <div class="fbutton">
                    Sân    <select name="stadium" id="stadium">
                                <?php foreach ($stadiums as $item): ?>
                                <option value="<?php echo $item->name ?>"><?php echo
$item->type->stadium_type; ?>-<?php echo
$item->name ?></option>
                                <?php endforeach; ?>
                            </select>
                    </div>
                    <div class="btnseparator"></div>
                     <div id="showtodaybtn" class="fbutton">
                        <div><span title='Click to back to today ' class="showtoday">
                        Hôm nay</span></div>
                    </div>
                      <div class="btnseparator"></div>
        
                    <div id="showdaybtn" class="fbutton">
                        <div><span title='Day' class="showdayview">Ngày</span></div>
                    </div>
                      <div  id="showweekbtn" class="fbutton fcurrent">
                        <div><span title='Week' class="showweekview">Tuần</span></div>
                    </div>    
                    <!--
<div  id="showmonthbtn" class="fbutton">
                        <div><span title='Month' class="showmonthview">Tháng</span></div>
                    </div>
-->                     
                    <div class="btnseparator"></div>
                      <div  id="showreflashbtn" class="fbutton">
                        <div><span title='Refresh view' class="showdayflash">Cập nhật</span></div>
                        </div>
                     <div class="btnseparator"></div>
                    <div id="sfprevbtn" title="Prev"  class="fbutton">
                      <span class="fprev"></span>
        
                    </div>
                    <div id="sfnextbtn" title="Next" class="fbutton">
                        <span class="fnext"></span>
                    </div>
                    <div class="fshowdatep fbutton">
                            <div>
                                <input type="hidden" name="txtshow" id="hdtxtshow" />
                                <span id="txtdatetimeshow">Loading</span>
        
                            </div>
                    </div>
                    
                    <div class="clear"></div>
                    </div>
              </div>
              <div style="padding:1px;">
        
                <div class="t1 chromeColor">
                    &nbsp;</div>
                <div class="t2 chromeColor">
                    &nbsp;</div>
                <div id="dvCalMain" class="calmain printborder">
                    <div id="gridcontainer" style="overflow-y: visible;">
                    </div>
                </div>
                <div class="t2 chromeColor">
        
                    &nbsp;</div>
                <div class="t1 chromeColor">
                    &nbsp;
                </div>   
                </div>     	
            </div>
            
            <div class="bottom-tnm-col-left"></div>
        </div>
<div class="tnm-col-right">
        	<h2 class="title-tnm-col-right">
            	Tìm sân trống
            </h2>
            <div class="content-tnm-col-right">
            	<div id="sub-col-right">                    
                    <div class="sub-content">
                    	<ul>
                        	<li>Loại sân:</li>
                            <li class="num">
                            	<select style="width:105px" id="search_stadium_type" name="stadium_type">
                                    <?php foreach ($type as $item): ?>
                                        <option value="<?php echo $item->id ?>"><?php echo
$item->stadium_type ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </li>
                            <li>Tìm kiếm theo:</li>
                            <li class="num">
                            	<select style="width:105px" name="search_day" id="search_day">
                                    <option value="today">Hôm nay</option>
                                    <option value="week">7 Ngày tiếp theo</option>
                                </select>
                            </li>
                            <li>Từ:</li>
                            <li class="num">
                            	<select style="width:105px" name="search_begin_time" id="search_begin_time">
                                    <option>00:00</option>
                                    <option>00:30</option>
                                    <option>01:00</option>
                                    <option>01:30</option>
                                    <option>02:00</option>
                                    <option>02:30</option>
                                    <option>03:00</option>
                                    <option>03:30</option>
                                    <option>04:00</option>
                                    <option>04:30</option>
                                    <option>05:00</option>
                                    <option>05:30</option>
                                    <option>06:00</option>
                                    <option>06:30</option>
                                    <option>07:00</option>
                                    <option>07:30</option>
                                    <option>08:00</option>
                                    <option>08:30</option>
                                    <option>09:00</option>
                                    <option>09:30</option>
                                    <option>10:00</option>
                                    <option>10:30</option>
                                    <option>11:00</option>
                                    <option>11:30</option>
                                    <option>12:00</option>
                                    <option>12:30</option>
                                    <option>13:00</option>
                                    <option>13:30</option>
                                    <option>14:00</option>
                                    <option>14:30</option>
                                    <option>15:00</option>
                                    <option>15:30</option>
                                    <option>16:00</option>
                                    <option>16:30</option>
                                    <option>17:00</option>
                                    <option>17:30</option>
                                    <option>18:00</option>
                                    <option>18:30</option>
                                    <option>19:00</option>
                                    <option>19:30</option>
                                    <option>20:00</option>
                                    <option>20:30</option>
                                    <option>21:00</option>
                                    <option>21:30</option>
                                    <option>22:00</option>
                                    <option>22:30</option>
                                    <option>23:00</option>
                                    <option>23:30</option>
                                </select>
                            </li>
                            <li>Đến:</li>
                            <li class="num">
                            	<select style="width:105px;" name="search_end_time" id="search_end_time">
                                    <option>00:00</option>
                                    <option>00:30</option>
                                    <option>01:00</option>
                                    <option>01:30</option>
                                    <option>02:00</option>
                                    <option>02:30</option>
                                    <option>03:00</option>
                                    <option>03:30</option>
                                    <option>04:00</option>
                                    <option>04:30</option>
                                    <option>05:00</option>
                                    <option>05:30</option>
                                    <option>06:00</option>
                                    <option>06:30</option>
                                    <option>07:00</option>
                                    <option>07:30</option>
                                    <option>08:00</option>
                                    <option>08:30</option>
                                    <option>09:00</option>
                                    <option>09:30</option>
                                    <option>10:00</option>
                                    <option>10:30</option>
                                    <option>11:00</option>
                                    <option>11:30</option>
                                    <option>12:00</option>
                                    <option>12:30</option>
                                    <option>13:00</option>
                                    <option>13:30</option>
                                    <option>14:00</option>
                                    <option>14:30</option>
                                    <option>15:00</option>
                                    <option>15:30</option>
                                    <option>16:00</option>
                                    <option>16:30</option>
                                    <option>17:00</option>
                                    <option>17:30</option>
                                    <option>18:00</option>
                                    <option>18:30</option>
                                    <option>19:00</option>
                                    <option>19:30</option>
                                    <option>20:00</option>
                                    <option>20:30</option>
                                    <option>21:00</option>
                                    <option>21:30</option>
                                    <option>22:00</option>
                                    <option>22:30</option>
                                    <option>23:00</option>
                                    <option>23:30</option>
                                </select>
                            </li>
                        </ul>
                    </div>
                    <div class="button" style="padding-top:15px; margin-left:80px; clear:both"><a href="javascript:void(0);" id="findbtn">Tìm sân</a></div>
                </div>
                <div class="clear"></div>
                <div id="search_result"></div>
            </div>
            <div class="bottom-tnm-col-right"></div>
        </div>
<script type="text/javascript">
var availableCustomers = new Array();
<?php foreach ($customers as $key => $cus) {
    echo 'availableCustomers[' . $key . '] = "' . $cus->name . '";';
} ?>
// add autocompleted
function addAutocompleted()
{
    $("#bbit-cal-what").autocomplete({
    	source: availableCustomers,
        minLength: 1,
        highlight: true,
        autoFill: true,
        select: function(event, ui){
            $(this).val(ui.item.value).focus();
            return false;
          }
    });  
}

$().ready(function(){
    $('#findbtn').click(function(){
        var type = $('#search_stadium_type').val();
        var by = $('#search_day').val();
        var from = $('#search_begin_time').val();
        var to = $('#search_end_time').val();
        $('#search_result').html('Tìm kiếm dữ liệu...');
        $.post( base_url + '/search/stadium',{type : type,by : by,from : from, to : to},function(resp){
           $('#search_result').html(resp); 
        });
        
        return false;
    });
    var stadium_id = '<?php echo $stadium_id; ?>';
    if(stadium_id != '')
    {
        $('#stadium').val(stadium_id);
        $('.showreflashbtn').click();
    }
});

</script>